<!--简文本预览模块-->
<template>
  <div class="item-content">
    <span
      class="content-text"
      :style="{
        fontSize: adaptiveFontSize(fontSize),
        color: fontColor,
        textAlign: location,
        fontWeight,
        fontFamily,
      }"
    >
      {{ content }}
    </span>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import { DEVICE_TYPE, SCALE_CONFIGURATION } from "@/utils/mockConfiguration/mockConfig";
const props = defineProps({
  terminalType: {
    type: String,
    required: true,
    default: DEVICE_TYPE.DESKTOP, //DESKTOP:pc端,MOBILE:移动端
  },
});

//模块样式
const cssStyle = defineModel("cssStyle", {
  type: Object,
  required: false,
});

//模块数据
const businessData = defineModel("businessData", {
  type: Object,
  required: false,
});

const { fontFamily, fontWeight, location, fontColor, fontSize } = toRefs(cssStyle.value);
const { content } = toRefs(businessData.value);

/**
 * 适配字体
 */
const adaptiveFontSize = computed(() => value => `${value * SCALE_CONFIGURATION[props.terminalType]}rem`);
</script>

<style scoped lang="less">
.content-text {
  flex: 1;
}
</style>
